<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title" back-url="index/order"></my-navbar>
		
		<view class="pay-top">
			<block v-if="order.is_retainer===0">
				<view class="tips">需支付金额</view>
				<view class="price">￥<text>{{order.money}}</text></view>
			</block>
			<block v-else-if="order.is_retainer==1 && order.retainer_pay_status==0">
				<view class="tips">需付订金</view>
				<view class="price">￥<text>{{order.retainer_first_fee}}</text></view>
				<view class="othen-remark">请于<text>{{order.retainer_last_time}}</text> 前付清尾款</view>
				<view class="othen-remark">尾款金额：￥{{order.retainer_last_fee}}</view>
				
			</block>
			<block v-else-if="order.is_retainer==1 && order.retainer_pay_status==1">
				<view class="tips">尾款金额</view>
				<view class="price">￥<text>{{order.retainer_last_fee}}</text></view>
				<view class="othen-remark">
					<count-down :closetime="order.retainer_last_time" type="default"></count-down>
				</view>
			</block>
			<view class="othen-remark" v-if="order.is_deposit=='0' && order.deposit_fee!=='0.00'">线下需支付：￥{{order.deposit_fee}} 押金</view>
			<view class="othen-remark2">{{$config.base.deposit_tips}}</view>
		</view>
		
		<view class="pay-list">
			<!-- #ifdef MP-WEIXIN -->
			<view class="pay-type" @click="payShow('wxpay')">
				<u-icon label="微信支付" size="40" space="10" name="weixin-circle-fill" color="#39AE37"></u-icon>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
<!-- 			<view class="pay-type" @click="alipay()" v-if="$config.alipay.service_status===1">
				<u-icon label="芝麻信用授权" width="40" height="40" imgMode='aspectFit' space="10" name="/static/images/zmxy.png"></u-icon>
			</view> -->
			<view class="pay-type" @click="payShow('alipay')">
				<u-icon label="支付宝支付" size="40" space="10" name="zhifubao-circle-fill" color="#337AF6"></u-icon>
			</view>
			<!-- #endif -->
			<view class="pay-type" @click="payShow('yue')">
				<u-icon :label="'余额支付 ( ¥ ' + yue + ' )'" size="40" space="10" name="rmb-circle-fill" color="#F2BA1A"></u-icon>
			</view>
			<view class="pay-type" @click="offline()">
				<u-icon label="线下汇款" size="40" space="10" name="rmb-circle" color="#6495ED"></u-icon>
			</view>
		</view>
		<view class="to-order-list" @click="discount">申请改价</view>
		<view class="to-order-list" @click="toOrder('')">订单列表</view>
		
		<discountPop ref="discount"></discountPop>
	</view>
</template>

<script>
	import $pay from '@/common/pay'
	import checkLogin from '@/mixins/loginCheck.js'
	import discountPop from '../components/discount-pop.vue'
	export default {
		mixins:[checkLogin],
		components:{
			discountPop
		},
		data() {
			return {
				nav_title:'收银台',
				color:"#A8A8A8",
				order:{},
				order_id:0,
				yue:"0.00",
				check_pay_num:1,		//检查支付成功次数，防止多次请求
			}
		},
		onLoad(option){
			this.order_id=option.id
			this.initData()
		},
		onShow(){
		},
		methods: {
			initData(){
				this.$u.api.orderInfo({order_id:this.order_id}).then(res=>{
					// this.payShow()
					this.order=res.data.order
				}).catch(data=>{
					//别人的订单，或者订单不存在
					if(data.errno===1){
						this.$c.a('index/index')
					}
				})
				
				//获取用户信息的余额
				this.$u.api.userInfo().then(res=>{
					this.yue=res.data.member.now_money;
				})
			},
			//发起支付
			payShow(paytype){
				let than=this
				let post={id:this.order_id}
				this.showLoading('支付中...');
				$pay.orderPay(paytype,post).then(res=>{
					if(paytype=='wxpay'){		//微信支付检查是否成功
						than.wxPayOk()
					}else{
						than.toOrder()
					}
				}).catch(e=>{
					uni.hideLoading()
					if(e==="fail"){
						than.$c.info('您已取消支付')
					}else{
						than.$c.error(e)
					}
				})
			},			
			// //支付宝支付
			// alipay(){
			// 	//是否需要发起预授权
			// 	if(this.$config.alipay.service_status===1){
			// 		let than=this
			// 		this.$u.api.authPay({id:this.order.id}).then(res=>{
			// 			if(res.status){
			// 				$pay.aliAuthPay(res.data).then(result=>{
			// 					if(result.status){
			// 						than.payShow('alipay')
			// 					}else{
			// 						than.$c.error(result.tips)
			// 					}
			// 				}).catch(error=>{
			// 					than.$c.error(error)
			// 				})
			// 			}
			// 		})
			// 	}else{
			// 		this.payShow('alipay')
			// 	}
			// },
			//跳转订单详情
			toOrder(tips='支付成功！'){
				if(tips==''){
					this.$c.a('pages/index/order',4)
				}else{
					this.$c.success(tips,'pages/order/detail/index?ispay=1&id='+this.order_id,4)
				}
			},
			// 微信支付成功后，间歇性请求检查是否支付成功
			wxPayOk(){
				this.showLoading('查询支付结果...');
				this.check_pay_num=1;
				//定义一个变量保存定时器ID
				let timerId = null;
					
				const checkPayment = () => {
					this.check_pay_num++;
					
					this.$u.api.orderInfo({
						order_id: this.order_id,
						ispay: 1,
					}).then(res => {
						if (res.data.order.is_pay == 1) {
							clearTimeout(timerId);
							// 支付成功
							this.$c.success('支付成功！', 'pages/order/detail/index?ispay=1&id=' + this.order_id, 4);
						} else if (this.check_pay_num >= 5) {
							clearTimeout(timerId)
							// 超过最大检查次数
							this.$c.error('网络超时，请以订单为准', 'pages/order/detail/index?ispay=1&id=' + this.order_id, 4);
						} else {
							// 未支付，继续检查
							timerId = setTimeout(checkPayment, 2000); // 每隔2秒重新调用
						}
					})
				};
				
				// 第一次调用检查
				checkPayment();
			},
			//显示加载
			showLoading(text){
				uni.showLoading({
					title: text,
					mask: true
				})
			},
			discount(){
				this.$refs.discount.show(this.order_id)
			},
			// 线下汇款
			offline(){
				this.$u.api.orderPay({id:this.order_id,pay_type:'offline'}).then(res=>{
					this.$c.a('flow/pay/offline?id='+this.order_id+'&pid='+res.data.pay_id+'&psn='+res.data.payment_sn)
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $u-bg-color;
	}
	.pay-list{
		background-color: #FFFFFF;
		border-top: 1px solid $u-border-color;
	}
	.pay-type{
		padding: 30rpx 30rpx 30rpx 40rpx;
		border-bottom: 1px solid $u-border-color;
		background: url(@/static/images/icon-arrow.png) no-repeat center right 20rpx;
		background-size: 5%;
	}
	.pay-top{
		padding: 70rpx 30rpx;
		text-align: center;
		background-color: #FFFFFF;
		border-bottom: 1px solid $u-border-color;
		margin-bottom: 30rpx;
	}
	.pay-top .tips{
		font-size: 30rpx;
		color: $u-tips-color;
	}
	.pay-top .price{
		color: $u-tips-color;
		font-size: 38rpx;
	}
	.pay-top .price text{
		font-weight: 700;
		color: #e45656;
		font-size: 52rpx;
		margin-top: 20rpx;
	}
	.to-order-list{
		font-size: 28rpx;
		margin-top: 30rpx;
		padding: 10rpx;
		color: $u-tips-color;
		text-align: center;
	}
	.othen-remark{
		margin-top: 20rpx;
		font-size: 26rpx;
		color:$u-tips-color;
	}
	.othen-remark2{
		text-align: center;
		width: 80%;
		margin: 20rpx auto 0px auto;
		padding-top: 20rpx;
		font-size: 26rpx;
		color:$u-tips-color;
		border-top: 1px solid $u-border-color;
	}
	.othen-remark text{
		color:$price-color;
	}
</style>
